/* eslint-disable no-unused-vars */
/* eslint-disable import/no-cycle */
import React, { useEffect, useImperativeHandle, useState, forwardRef, useContext } from 'react';
import { Form, Input, Button, Select, message } from 'antd';
import { Menu, Item, Separator, Submenu, useContextMenu } from 'react-contexify';
import DesignUtil from './DesignUtil';
import ApiHelper from '../api';
import DesignContext from '../designContext';
import ControlUtil from '../controls/ControlUtil';
import 'react-contexify/dist/ReactContexify.css';
// 参考文档:https://fkhadra.github.io/react-contexify/quick-start
/**
 * 控件上下文菜单：右键菜单
 */
const ControlContextMenu = forwardRef((props2, ref) => {
  const { parentForm } = props2;
  // 右键菜单
  const menuId = 'control_right_menu';
  const { show } = useContextMenu({
    id: menuId,
  });

  useImperativeHandle(ref, () => ({
    show,
  }));

  useEffect(() => {}, []);

  const handleItemClick = ({ event, props, data, triggerEvent }) => {
    if (event.currentTarget.getAttribute('tag') === 'remove') {
      parentForm.removeControl(props.key);
    }
    if (event.currentTarget.getAttribute('tag') === 'edit') {
      const find = ControlUtil.deepFindControl(parentForm.controls, props.key);
      parentForm.clickControlEditProperty(event, find);
    }
  };

  const deleteMenu = ({ props, data, triggerEvent }) => {
    // 自定义按钮可删除
    const find = ControlUtil.deepFindControl(parentForm.controls, props.key);
    if (find != null && find.data.custom) {
      return false;
    }
    return true;
  };

  return (
    <>
      <Menu id={menuId}>
        <Item tag="remove" hidden={deleteMenu} onClick={handleItemClick}>
          删除
        </Item>
        <Item tag="edit" onClick={handleItemClick}>
          编辑
        </Item>
      </Menu>
    </>
  );
});

export default ControlContextMenu;
